<template>
  <div class="card" id="bill-detail-hotel">
    <div class="card-header">酒店预订明细</div>
    <dl class="row" v-for="info in detailInfo.hotelBookings">
      <dt class="col-4 text-end">酒店</dt>
      <dd class="col-8">{{ info.hotelName }}</dd>
      <dt class="col-4 text-end">入住日期</dt>
      <dd class="col-8">{{ info.ddate }}</dd>
      <dt class="col-4 text-end">离店日期</dt>
      <dd class="col-8">{{ info.leaveDate }}</dd>
      <dt class="col-4 text-end">房型</dt>
      <dd class="col-8">{{ info.roomType }}</dd>
      <dt class="col-4 text-end">房间数</dt>
      <dd class="col-8">{{ info.roomCount }}</dd>
    </dl>

    <table class="table talbe-sm">
      <thead>
        <tr class="bg-info">
          <th class="px-0">卖价</th>
          <th class="px-0">底价</th>
          <th class="px-0">服务费</th>
          <th class="px-0">总金额</th>
          <th class="px-0">总成本</th>
          <th class="px-0">利润</th>
          <th class="px-0"></th>
        </tr>
      </thead>
      <tbody>
        <template v-for="info in detailInfo.hotelBookings">
          <tr :key="info.id">
            <td class="px-0">{{ info.price }}</td>
            <td class="px-0">{{ info.bottomPrice }}</td>
            <td class="px-0">{{ info.serviceCharge }}</td>
            <td class="px-0">{{ info.totalAmount }}</td>
            <td class="px-0">{{ info.totalCost }}</td>
            <td class="px-0">{{ info.profit }}</td>
            <td class="px-0">{{ info.remark }}</td>
          </tr>
        </template>
      </tbody>
    </table>
    <table class="table table-striped table-hover talbe-sm">
      <thead>
        <tr>
          <th>乘客</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="info in detailInfo.hotelBookings">
          <tr :key="info.id">
            <td>
              {{ info.passengerName }}
            </td>
            <td>{{ info.remark }}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    detailInfo: {
      type: Object,
    },
  },
};
</script>